<template>
  <el-dialog
    title="考生设置"
    width="560px"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="80px"
      v-loading="confirmLoading"
    >
      <el-form-item label="考试期数" prop="examId">
        <el-select
          v-model="form.examId"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in examPeriodList"
            :key="item.id"
            :label="item.period"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考生来源" prop="fromInterface">
        <el-select
          v-model="form.fromInterface"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in sourceList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择考生" prop="examId">
        <el-col :span="11">
          <el-form-item prop="startTime">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="创建日期"
              v-model="form.startTime"
              style="width: 100%;"
              :picker-options="pickerOptionsStart"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="endTime">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="结束日期"
              v-model="form.endTime"
              style="width: 100%;"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" :loading="confirmLoading" @click="submitForm">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import formMixin from "@/mixins/form";
import request from "@/utils/request";
const sourceList = [
  { label: "接口导入", value: "1" },
  { label: "Excel导入", value: "0" },
  { label: "接口与Excel导入", value: "2" }
];
export default {
  name: "Dialog",
  mixins: [formMixin],
  components: {},
  data() {
    return {
      rules: {
        examId: [
          {
            required: true,
            message: "请选择考试期数",
            trigger: "change"
          }
        ],
        fromInterface: [
          {
            required: true,
            message: "请选择考生数据来源",
            trigger: "change"
          }
        ]
      },
      Urls: {
        addUrl: "/api/examUser/exam",
        examPeriodListUrl: "/api/exam/list"
      },
      examPeriodList: [],
      sourceList,
      tipMap: {
        create: "设置成功"
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    beforeOpen() {
      this.getExamPeriodList();
    },
    resetForm() {
      this.form = {};
    },
    // 获取考试期数
    getExamPeriodList() {
      request({
        url: this.Urls.examPeriodListUrl,
        method: "get"
      })
        .then(res => {
          console.log("period list", res);
          if (res.code == 0) {
            this.examPeriodList = res.data.records || [];
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {});
    },
    formatData(data) {
      let form = Object.assign({}, data);
      form.fromInterface == "2" ? null : form.fromInterface;
      return form;
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>
